<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

{% load i18n %}

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt">

    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <!-- Framework CSS -->
    <link media="screen, projection" rel="stylesheet" href="{{MEDIA_URL}}css/screen.css" type="text/css"  />
    <link media="print" rel="stylesheet" href="{{MEDIA_URL}}css/print.css" type="text/css" />
    <!--[if IE]>
    <link media="screen, projection" rel="stylesheet" href="{{MEDIA_URL}}css/ie.css" type="text/css" />
    <![endif]-->
    
    <style type="text/css">
        {% include "comics/comics.css" %}
    </style>
    
    <script src="{{MEDIA_URL}}js/mootools-1.2-core-yc.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    window.addEvent('domready', function() {
    
        var el = $('temp_messages');
        if ( $defined(el) ){
            var morph = new Fx.Morph(el, {duration:'long', transition: Fx.Transitions.Sine.easeOut});
            morph.chain(function (){ el.destroy(); });
            var hideMessages = function(){ morph.start({
                'margin-bottom':0,
                'margin-top':0,
                'height':0,
                'opacity':0
            });};
            hideMessages.delay(3000);
        }
    });
    </script>
    
    <title>{% block title %}{% endblock title %}</title>
    
    {% block head %}
    {% endblock head %}
    
    </head>
    <body style="background-image: url('{{MEDIA_URL}}comics/images/static/bk_barra.png')">
        <div class="container">
            <div class="comics-body">
            <div>
            
            {% if user.is_authenticated %}<a href="{% url comics.logout %}?book={{webcomic.slug}}">Logout</a>
            {% else %}<a href="{% url auth_login %}?next={{request.path}}">Login</a>{% endif %}
            
            {% block more-options %}
            {% endblock more-options %}
            
            </div>
            {% block body %}
            {% endblock body %}
            </div>
        </div>
    </body>
</html>